<template>
    <div>
        <span class="title">预警消息列表</span>
        <Form ref="formInline" inline style="margin-top:15px;">
            <FormItem>
                <Select v-model="devgroup" style="width:200px" placeholder="请选择变电站">
                    <Option v-for="(item,key) in grouplist" :value="item.name" :key="key">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <!--<FormItem>
                <Select v-model="devgroup_01" style="width:200px" placeholder="请选择设备类型">
                    <Option v-for="(item,key) in grouplist_01" :value="item.name" :key="key">{{ item.name }}</Option>
                </Select>
            </FormItem>-->
            <FormItem>
                <Select v-model="warningtype" style="width:200px" placeholder="请选择告警类型">
                    <Option v-for="(item,key) in warninglist" :value="item" :key="key">{{ item }}</Option>
                </Select>
            </FormItem>
             <FormItem>
                <Select v-model="devgroup_02" style="width:200px" placeholder="请选择状态">
                    <Option v-for="(item,key) in grouplist_02" :value="item.id" :key="key">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSearch">查询</Button>
                <Button type="default" @click="handleReset">重置</Button>
            </FormItem>
            
        </Form>

        <Table :data="warningdata" :columns="warninghead" stripe></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="currenpage" @on-change="changePage"></Page>
            </div>
        </div>
        
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            searchitem:{},
            loading:true,
            issearch:false,
            currenpage:1,
            modval1:1.0,
            modval2:1.0,
            modval3:1.0,
            isshow:false,
            Title:"预警条件设置",
            devgroup:'',
            grouplist:[],
            devgroup_01:'',
            grouplist_01:[],
            devgroup_02:'',
            warninglist:['测温标签低电量','设备发生紧急温升事故','设备温度异常高于历史平均温度'],
            warningtype:'',
            grouplist_02:[{id:'0',name:'待处理'},{id:'1',name:'处理中'},{id:'2',name:'已处理'}],
            total:1,
            warninghead:[
                {
                    title: '日期',
                    key: 'date',
                    sortable: true
                },{
                    title: '预警类型',
                    key: 'warningtype',
                    sortable: true,
                    render:(h,params)=>{
                        return h('div',[
                            h('strong', {  
                                style: {  
                                    color:'#0e90d2',
                                    fontSize:'15px',
                                    cursor:'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.$store.commit('deviceWarnning',params.row);
                                        this.$store.commit('deviceimg',params.row.img);
                                        this.$router.push({name:'warning_detail'});
                                    }
                                }
                            }, params.row.warningtype),  
                        ])
                    }
                },{
                    title: '变电站',
                    key: 'transformer_substation',
                    sortable: true
                },{
                    title: '设备类型',
                    key: 'devtype',
                    sortable: true
                },{
                    title: '设备编组',
                    key: 'devgroup',
                    sortable: true
                },{
                    title: '设备名称',
                    key: 'devname',
                    sortable: true
                },{
                    title: '负责人',
                    key: 'person',
                    sortable: true
                },{
                    title: '状态',
                    render:(h,params)=>{
                        let fontcolor = '';
                        if(params.row.status=='已处理'){
                            fontcolor = 'green';
                        }else if(params.row.status=='待处理'){
                            fontcolor = 'red';
                        }else if(params.row.status=='处理中'){
                            fontcolor = '#2d8cf0';
                        }
                        return h('div',[
                            h('span',{
                                style:{color:fontcolor}
                            },params.row.status)
                        ])
                    }
                },
            ],
            warningdata:[]
        }
    },
    created(){
        if(!this.$router.history.current.params.resolvestatus){
            this.devgroup = this.$store.state.warningsearchitem?this.$store.state.warningsearchitem.s1:'';
            this.devgroup_01 = this.$store.state.warningsearchitem?this.$store.state.warningsearchitem.s1:'';
            this.devgroup_02 = this.$store.state.warningsearchitem?this.$store.state.warningsearchitem.s2:'';
            this.warningtype = this.$store.state.warningsearchitem?this.$store.state.warningsearchitem.s0:'';
            this.GetWarnningData(1,10);
        }else{
            let searchitem = {'s0':'','s1':'','s2':'0'};
            this.GetWarnningData(1,10,searchitem);
            this.devgroup_02 = '0';
        }
        
        this.get_Ts_Type_Group();
    },
    methods:{
        get_Ts_Type_Group:function(){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/util-api-sgdlist/'
            })
            .then(function (response) {
                //console.log(response)
                if(response.status==200){
                    vm.grouplist = [];
                    vm.grouplist_01 = [];
                    for(let i = 0;i<response.data.substation.length;i++){
                        vm.grouplist.push(response.data.substation[i]);
                    }
                    for(let i = 0;i<response.data.device_type.length;i++){
                        vm.grouplist_01.push(response.data.device_type[i]);
                    }
                    
                }else{
                    vm.$Message.error('获取变电站列表失败');
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        },
        changeLoading() {
            this.loading = false;
            this.$nextTick(() => {
                this.loading = true;
            });
        },
        handleconfirm:function(){
            if(!this.modval1 || !this.modval2 || !this.modval3){
                this.$Message.error('请输入正确的设置');
                return this.changeLoading();
            }
            //console.log(this.modval1,this.modval2,this.modval3)
        },
        handleSearch:function(){
            this.issearch = true;
            let searchitem = {'s0':this.warningtype?this.warningtype:'','s1':this.devgroup?this.devgroup:'','s2':this.devgroup_02?this.devgroup_02:''};
            this.GetWarnningData(1,10,searchitem);
            this.searchitem = searchitem;
            this.$store.commit('updateWarningSearchItem',searchitem)
        },
        handleReset:function(){
            this.issearch = false;
            this.GetWarnningData(1,10,'');
            this.devgroup = '';
            this.warningtype = '';
            this.devgroup_01 = '';
            this.devgroup_02 = '';
            this.searchitem = {};
        },
        handleSetting:function(){
            this.isshow = true;
        },
        changePage:function(page){
            this.currenpage = page;
            if(this.searchitem.s0 || this.searchitem.s1 || this.searchitem.s2){
                this.GetWarnningData(page,10,this.searchitem);
            }else{
                this.GetWarnningData(page,10,'');
            }
        },
        GetWarnningData:function(page,pagesize,searchdata){
            let vm = this;
            let url = '/api-warning/?page='+page+'&page_size='+pagesize;
            if(searchdata){
                url = '/api-warning/?page='+page+'&page_size='+pagesize+'&warn_type='+searchdata.s0+'&processing_status='+searchdata.s2+'&device_index__ts_index__name=' +searchdata.s1;
            }
            util.ajax({
                method: 'get',
                url: url
            })
            .then(function (response) {
                if(response.status==200){
                    vm.total = response.data.count;
                    vm.warningdata = [];
                    for(let i = 0; i < response.data.results.length;i++){
                        let status = '';
                        if(response.data.results[i].processing_status===0){
                            status = '待处理';
                        }
                        if(response.data.results[i].processing_status===1){
                            status = '处理中';
                        }
                        if(response.data.results[i].processing_status===2){
                            status = '已处理';
                        }
                        let item = {
                            id:response.data.results[i].id,
                            date:response.data.results[i].created_datetime,
                            warningtype:response.data.results[i].warn_type,
                            transformer_substation:response.data.results[i].substation,
                            devtype:response.data.results[i].device_type_name,
                            devgroup:response.data.results[i].device_group_name,
                            devname:response.data.results[i].device_name,
                            person:response.data.results[i].last_mod_user,
                            status:status,
                            location:response.data.results[i].device_group_num,
                            device_index:response.data.results[i].device_index,
                            img:response.data.results[i].device_pic_hd,
                            devdetail:response.data.results[i].description,
                            device_battery_msg_flag:response.data.results[i].device_battery_msg_flag,
                            device_warning_msg_flag:response.data.results[i].device_warning_msg_flag
                        };
                        vm.warningdata.push(item);
                    }
                }else{
                    vm.$Message.error('获取告警列表失败');
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        }
    }
}
</script>
<style scoped>
    .title{
        color: #0e90d2;
        font-size: 20px;
        font-weight: 700;
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ivu-modal{
        top: 0;
    }
</style>
